<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>迭代器</title>
</head>

<body>
<!-- 
  迭代器
  特点：
    1.for ... of循环, Iterator接口主要对接
    2.原生具备Iterator的数据（for of遍历）
      Array
      Arguments
      Set
      Map
      String
      TypedArray
      NodeList
    3.工作原理
      a.创建一个指针对象，指向当前数据结构的起始位置
      b.第一次调用对象的next方法，指针自动指向数据结构的第一个成员
      c.接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
      d.每调用一次都会返回一个含有value和done属性的对象
-->
</body>

<script>
  // 声明一个数组
  const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];

  // 使用for in 遍历数组
  for(let v in xiyou) {
    console.log(v)  // 0,1,2,3      index
  }

  // 使用for of 遍历数组
  for(let v of xiyou) {
    console.log(v)  // '唐僧', '孙悟空', '猪八戒', '沙僧'     value
  }

  console.log(xiyou);
  let iterator = xiyou[Symbol.iterator]();

  // 调用对象的next方法
  console.log(iterator.next());     // {value: "唐僧", done: false}
  console.log(iterator.next());     // {value: "孙悟空", done: false}
  console.log(iterator.next());     // {value: "猪八戒", done: false}
  console.log(iterator.next());     // {value: "沙僧", done: false}
  console.log(iterator.next());     // {value: "undefined", done: true}

</script>

</html>